Jassif Team Institution

Angular Lifecycle Hooks

Lifecycle hooks என்பது key moments-ல் Angular call செய்யும் methods ஆகும் (init, input changes, view init, destroy) அதனால் நீங்கள் set up, changes-கு react, template refs access, மற்றும் clean up செய்யலாம்.

import { OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

export class Demo implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild('box') box!: ElementRef<HTMLInputElement>;
  intervalId: any;
  ngOnInit() { /* setup after inputs */ }
  ngAfterViewInit() { this.box.nativeElement.focus(); }
  ngOnDestroy() { clearInterval(this.intervalId); }
}

// Template: <input #box>

Lifecycle Hooks

Lifecycle toggle: ஒரு component show செய்தல் (e.g., *ngIf உடன்) ngOnInit run செய்கிறது; hide செய்தல் ngOnDestroy run செய்கிறது.

Work do/undo: Init-ல் timers/subscriptions start செய்யவும், destroy-ல் clear/unsubscribe செய்யவும்.

export class Child implements OnInit, OnDestroy {
  intervalId: any;
  ngOnInit() { this.intervalId = setInterval(() => {/* ... */}, 1000); }
  ngOnDestroy() { clearInterval(this.intervalId); }
  // <child-cmp *ngIf="show"></child-cmp>

Example

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'child-cmp',
  standalone: true,
  template: `<p>Child works!</p>`
})
export class Child implements OnInit, OnDestroy {
  intervalId: any;
  ngOnInit() {
    console.log('Child: ngOnInit');
    this.intervalId = setInterval(() => console.log('Child: tick'), 1000);
  }
  ngOnDestroy() {
    console.log('Child: ngOnDestroy');
    clearInterval(this.intervalId);
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, Child],
  template: `
    <h3>Lifecycle Hooks</h3>
    <button (click)="toggle()">Toggle Child</button>
    <child-cmp *ngIf="show"></child-cmp>
  `
})
export class App {
  show = true;
  toggle() { this.show = !this.show; }
}

bootstrapApplication(App);

OnChanges Example

Parent → Child: Input box parent-ல் text update செய்கிறது; child [text] மூலம் அதை receive செய்கிறது.

Change record: Child SimpleChanges-லிருந்து last prev மற்றும் curr values store செய்கிறது display-க்கு.

Edge cases: undefined → value அல்லது value → '' போன்ற transitions handle செய்கிறது.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'child-cmp',
  standalone: true,
  template: `
    <p>Child: {{ text }}</p>
    <p *ngIf="lastChange">Last change: {{ lastChange.prev }} → {{ lastChange.curr }}</p>
  `
})
export class Child implements OnChanges {
  @Input() text = '';
  lastChange: { prev: any; curr: any } | null = null;
  ngOnChanges(changes: SimpleChanges) {
    if (changes['text']) {
      this.lastChange = {
        prev: changes['text'].previousValue,
        curr: changes['text'].currentValue
      };
    }
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, Child],
  template: `
    <h3>ngOnChanges</h3>
    <input [(ngModel)]="text" placeholder="Type to see changes">
    <child-cmp [text]="text"></child-cmp>
  `
})
export class App {
  text = '';
}

bootstrapApplication(App);

AfterViewInit Example

Multiple refs: @ViewChild மூலம் input box மற்றும் panel container இரண்டையும் read செய்கிறது.

Defer DOM work: View settle ஆக அனுமதிக்க ngAfterViewInit-ல் setTimeout பயன்படுத்துகிறது measuring-க்கு முன்.

measure(): Bounding box read செய்து size string format செய்கிறது.

import { bootstrapApplication } from '@angular/platform-browser';
import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <h3>ngAfterViewInit</h3>
    <input #box placeholder="I will be focused">
    <div #panel style="width:200px;height:100px;background:#f0f0f0;margin-top:8px;">
      Panel
    </div>
    <p>Panel size: {{ size }}</p>
  `
})
export class App implements AfterViewInit {
  @ViewChild('box') box!: ElementRef<HTMLInputElement>;
  @ViewChild('panel') panel!: ElementRef<HTMLDivElement>;
  size = '';

  ngAfterViewInit() {
    // Focus the input
    this.box.nativeElement.focus();
    
    // Let view settle then measure
    setTimeout(() => this.measure(), 0);
  }

  measure() {
    const rect = this.panel.nativeElement.getBoundingClientRect();
    this.size = `${Math.round(rect.width)}×${Math.round(rect.height)} px`;
  }
}

bootstrapApplication(App);

AfterViewInit & Cleanup

View initializes ஆகிய பிறகு template refs access செய்யவும் மற்றும் component destroy ஆகும் போது resources clean up செய்யவும்.

// Example teardown pattern
sub?.unsubscribe?.();
clearInterval(intervalId);
removeListener?.();

Exercise